<template>
  <el-container class='elheight'>
    <el-aside class='appTree'>
      <app-tree v-bind:tree-data="treeData" v-on:appTreeClick="treeClickHandle"></app-tree>
    </el-aside>
    <el-main>
      <el-container>
        <el-header class="dzy-main-header">
          <div class="btn-group-el">
            <btn-group :currentSelectedData="currentSelectedData" @btnClickCallback="btnClickCallback"></btn-group>
          </div>
          <div class="dzy-custom-search-box">
            <div>部门层级：
              <el-select v-model="queryData.level" clearable placeholder="请选择" @change="deptLevelChangedEvt">
                <el-option v-for="(item,index) in deptOption" :key="index" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </div>
            <div>角色类型：
              <el-select v-model="queryData.roleId" clearable filterable placeholder="请选择角色">
                <el-option v-for="item in roleCategoryOption" :key="item.id" :value="item.id" :label="item.roleName"></el-option>
              </el-select>
            </div>
            <div>签到人：
              <el-select
                v-model="queryData.userId"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入用户名"
                loading-text="正在加载"
                :remote-method="queryAppUserByName"
                :loading="appUserNameListLoading">
                <el-option
                  v-for="item in appUserNameList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div>签到地点：<el-input placeholder="请输入签到地点" v-model="queryData.address"  clearable class="dzy-custom-input"></el-input></div>
            <div>签到类型：
              <el-select v-model="queryData.signType" clearable placeholder="请选择签到类型">
                <el-option label="签到" value="1"></el-option>
                <el-option label="签退" value="2"></el-option>
              </el-select>
            </div>
            <div>选择时间：
              <el-date-picker
                  v-model="queryData.beginTime"
                  type="datetime"
                  value-format="timestamp"
                  default-time="12:00:00"
                  placeholder="选择开始时间">
              </el-date-picker>&nbsp;至
              <el-date-picker
                  v-model="queryData.endTime"
                  type="datetime"
                  value-format="timestamp"
                  default-time="12:00:00"
                  placeholder="选择结束时间">
              </el-date-picker>&nbsp;
            </div>
            <div><el-button @click="searchHandleClick" type="primary" icon="el-icon-search">查询</el-button></div>
          </div>
        </el-header>
        <el-main>
          <app-table
            :page-data="pageData"
            :table-columns="tableColumns"
            v-on:currentChange="handleCurrentChange"
            v-on:handleCheckedRows="handleCheckedRows">
          </app-table>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import AppTable from '@/components/AppTable'
import BtnGroup from '@/components/BtnGroup'
import AppTree from '@/components/common/AppTree'
import {getSignList} from '@/http/WangGeGuanLiApi'
import {getUserList, getDeptTree, findAllRoleByDeptCategorySel, getExportFileUrl} from '@/http/AppApi'
import {getDictDataOption} from '@/utils/getDictDataOption'
import {getToken} from '@/utils/LocalDataUtil'
export default {
  data () {
    return {
      pageData: {},
      currentSelectedData: [],
      ids: [],
      tableColumns: [
        {prop: 'name', label: '签到人'},
        {prop: 'time', label: '签到时间', formatter: this.dateFormatter},
        {prop: 'longitude', label: '经度'},
        {prop: 'latitude', label: '纬度'},
        {prop: 'address', label: '详细地址'},
        {prop: 'signTypeValue', label: '签到类型'}
      ],
      tableDada: [],
      queryData: {},
      treeData: [],
      appUserNameList: [],
      appUserNameListLoading: false,
      deptOption: [],
      roleCategoryOption: []
    }
  },
  components: {
    BtnGroup,
    AppTable,
    AppTree
  },
  mounted () {
    this.getTableData()
    this.getTreeData()
    this.getRoleCate()
    this.deptOption = getDictDataOption('层级')
  },
  methods: {
    cancel () {
      this.formData = {}
    },
    getTableData () {
      let param = this.queryData
      getSignList(param).then(resp => {
        if (resp.code && resp.code === '200') {
          this.pageData = resp.data
          if (this.pageData.items && this.pageData.items instanceof Array) {
            this.tableData = this.pageData.items
          }
        }
      })
    },
    deptLevelChangedEvt (val) {
      this.getRoleCate(val)
    },
    getRoleCate (val) {
      let m = this
      findAllRoleByDeptCategorySel(val).then(resp => {
        if (resp.code && resp.code === '200') {
          m.roleCategoryOption = resp.data
        }
      })
    },
    handleCurrentChange (val) {
      this.queryData.offset = (val - 1) * 10
      this.getTableData()
    },
    handleCheckedRows (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.currentSelectedData = rows
        this.formData = rows[0]
        this.ids = []
        let temp = rows
        for (const key in temp) {
          if (temp.hasOwnProperty(key)) {
            this.ids.push(rows[key].id)
          }
        }
      }
    },
    // 检索按钮操作
    searchHandleClick () {
      this.queryData.offset = 0
      this.getTableData()
    },
    getTreeData () {
      getDeptTree().then(resp => {
        if (resp.code === '200' && resp.data) {
          let data = resp.data
          this.treeData = data
        }
      })
    },
    treeClickHandle (data) {
      this.queryData = {}
      this.queryData.deptId = data.id
      this.getTableData()
    },
    btnClickCallback (callbackData) {
      if (callbackData.btnType === 'educe') {
        this.dialogFormVisible = false
        let token = getToken()
        let paramStr = ''
        if (this.ids.length > 0) {
          for (const key in this.ids) {
            if (this.ids.hasOwnProperty(key)) {
              paramStr += '&id=' + this.ids[key]
            }
          }
        }
        let selectData = ''
        for (const key in this.queryData) {
          if (this.queryData.hasOwnProperty(key)) {
            selectData += '&' + key + '=' + this.queryData[key]
          }
        }
        let path = getExportFileUrl() + '?token=' + token + paramStr + selectData + '&t=' + Math.random()
        console.log(path)
        window.location.href = path
      }
    },
    dateFormatter (row, column) {
      if (row && row.time) {
        let time = row.time
        return this.$moment(time).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    queryAppUserByName (param) {
      if (param !== '') {
        this.appUserNameListLoading = true
        param = {'name': param}
        getUserList(param).then(resp => {
          this.appUserNameListLoading = false
          if (resp.code === '200' && resp.data) {
            this.appUserNameList = resp.data
          }
        })
      }
    }
  }
}
</script>
